<!doctype html>
<!--[if lt IE 8 ]><html lang="en" class="no-js ie ie7 dark"><![endif]-->
<!--[if IE 8 ]><html lang="en" class="no-js ie dark"><![endif]-->
<!--[if (gt IE 8)|!(IE)]><!--><html lang="en" class="no-js dark"><!--<![endif]-->
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	
	<title>Constellation Admin Skin</title>
	<meta name="description" content="">
	<meta name="author" content="">
	
	<!-- Mobile metas -->
	<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
	
	<!-- Those meta will turn your website into an app on the iPhone -->
	<meta name="apple-mobile-web-app-capable" content="yes">
	<link rel="apple-touch-startup-image" href="../images/iphone_startup.html">
	
	<!-- Combined stylesheets load -->
	<link href="css/mini5f5e.css?files=reset,common,form,mobile,simple-lists,block-lists" rel="stylesheet" type="text/css">
	
	<!-- Favicon -->
	<link rel="shortcut icon" type="image/x-icon" href="../favicon.ico">
	<link rel="icon" type="image/png" href="../favicon-large.png">
	<link rel="apple-touch-icon" href="../apple-touch-icon.png">
	
	<!-- Modernizr for support detection, all javascript libs are moved right above </body> for better performance -->
	<script src="../js/libs/modernizr.custom.min.js"></script>
	
</head>

<body>
	
	<header>
		<h1>Tabs &amp; blocks</h1>
	</header>
	
	<a href="tour.html" id="back">Back</a>
	<div id="menu">
		<a href="#">Menu</a>
		
		<ul>
			<li><a href="#">Write</a>
				<ul>
					<li><a href="#">Articles</a></li>
					<li><a href="#">Add article</a></li>
					<li><a href="#">Posts</a></li>
					<li><a href="#">Add post</a></li>
				</ul>
			</li>
			<li><a href="#">Stats</a>
				<ul>
					<li><a href="#">Global stats</a>
						<ul>
							<li><a href="#">Views</a></li>
							<li><a href="#">Unique visitors</a></li>
							<li><a href="#">Sources</a></li>
						</ul>
					</li>
					<li><a href="#">Server load</a></li>
					<li><a href="#">Website stats</a></li>
					<li><a href="#">Reports</a></li>
					<li><a href="#">logs</a></li>
					<li><a href="#">Settings</a></li>
				</ul>
			</li>
			<li><a href="#">Users</a>
				<ul>
					<li><a href="#">List</a></li>
					<li><a href="#">Add user</a></li>
					<li><a href="#">Settings</a></li>
				</ul>
			</li>
			<li><a href="#">System settings</a>
				<ul>
					<li><a href="#">General</a></li>
					<li><a href="#">Server config</a></li>
					<li><a href="#">User groups</a></li>
				</ul>
			</li>
			<li><a href="#">My profile</a></li>
			<li class="red"><a href="#">Logout</a></li>
		</ul>
	</div>
	<div id="header-shadow"></div>
	
	<article>
		
		<section id="login-block">
			<div class="block-border"><div class="block-content no-padding">
				
				<h1>Use any element</h1>
				
				<div class="block-controls">
					
					<ul class="controls-tabs js-tabs">
						<li><a href="#tab-stats" title="Charts"><img src="../images/icons/web-app/24/Bar-Chart.png" width="24" height="24"></a></li>
						<li><a href="#tab-comments" title="Comments"><img src="../images/icons/web-app/24/Comment.png" width="24" height="24"></a></li>
						<li><a href="#tab-medias" title="Medias"><img src="../images/icons/web-app/24/Picture.png" width="24" height="24"></a></li>
						<li><a href="#tab-users" title="Users"><img src="../images/icons/web-app/24/Profile.png" width="24" height="24"></a></li>
						<li><a href="#tab-infos" title="Informations"><img src="../images/icons/web-app/24/Info.png" width="24" height="24"></a></li>
					</ul>
					
				</div>
				
				<div id="tab-stats">
					
					<ul class="blocks-list with-padding no-bottom-margin">
						<li>
							<a href="#" class="float-left"><img src="../images/icons/fugue/status.png" width="16" height="16"> Task name</a>
							<ul class="tags float-right">
								<li class="tag-time">5 days</li>
								<li class="tag-tags">Server</li>
							</ul>
						</li>
						<li>
							<a href="#" class="float-left"><img src="../images/icons/fugue/status.png" width="16" height="16"> Task name</a>
							<ul class="tags float-right">
								<li class="tag-time">5 days</li>
								<li class="tag-user">You</li>
							</ul>
						</li>
						<li>
							<a href="#" class="float-left"><img src="../images/icons/fugue/status.png" width="16" height="16"> Task name</a>
							<ul class="tags float-right">
								<li class="tag-time">5 days</li>
								<li class="tag-tags">Server</li>
							</ul>
						</li>
						<li>
							<a href="#" class="float-left"><img src="../images/icons/fugue/status.png" width="16" height="16"> Task name</a>
							<ul class="tags float-right">
								<li class="tag-tags">Server</li>
								<li class="tag-user">You</li>
							</ul>
						</li>
					</ul>
					
					<ul class="message">
						<li>4 tasks found</li>
					</ul>
					
				</div>
				
				<div id="tab-comments">
					
					<ul class="small-files-list icon-comment with-padding">
						<li>
							<a href="#"><strong>Jane</strong>: I don't think so<br>
							<small>On <strong>Post title</strong></small></a>
						</li>
						<li>
							<a href="#"><strong>Ken_54</strong>: What about using a different...<br>
							<small>On <strong>Post title</strong></small></a>
						</li>
						<li>
							<a href="#"><strong>Jane</strong> Sure, but no more.<br>
							<small>On <strong>Another post</strong></small></a>
						</li>
						<li>
							<a href="#"><strong>Max</strong>: Have you seen that...<br>
							<small>On <strong>Post title</strong></small></a>
						</li>
						<li>
							<a href="#"><strong>Anonymous</strong>: Good luck!<br>
							<small>On <strong>My first post</strong></small></a>
						</li>
					</ul>
					
				</div>
				
				<div id="tab-medias">
					
					<ul class="files">
						<li><a href="#">
							<span><img src="../images/demo/files/file1-mini.png" width="64" height="45" class="thumb"></span>
							Concept car.jpg
						</a></li>
						<li><a href="#">
							<span><img src="../images/demo/files/file2-mini.png" width="64" height="45" class="thumb"></span>
							Concept car 2.jpg
						</a></li>
						<li><a href="#">
							<span><img src="../images/icons/finefiles/64/excel.png" width="64" height="64"></span>
							Example.xls
						</a></li>
						<li><a href="#">
							<span><img src="../images/icons/finefiles/64/text.png" width="64" height="64"></span>
							Readme.txt
						</a></li>
					</ul>
					
				</div>
				
				<div id="tab-users">
					
					<ul class="extended-list icon-user">
						<li>
							<a href="#">
								<span class="icon"></span>
								John Doe<br>
								<small>Male, 28</small>
							</a>
							
							<ul class="extended-options">
								<li>
									Tasks: <strong>5/9</strong><br>
									<span class="progress-bar"><span style="width:56%"></span></span>
								</li>
							</ul>
						</li>
						<li>
							<a href="#">
								<span class="icon"></span>
								John Doe<br>
								<small>Male, 28</small>
							</a>
							
							<ul class="extended-options">
								<li>
									Tasks: <strong>5/9</strong><br>
									<span class="progress-bar"><span style="width:56%"></span></span>
								</li>
							</ul>
						</li>
						<li>
							<a href="#">
								<span class="icon"></span>
								John Doe<br>
								<small>Male, 28</small>
							</a>
							
							<ul class="extended-options">
								<li>
									Tasks: <strong>5/9</strong><br>
									<span class="progress-bar"><span style="width:56%"></span></span>
								</li>
							</ul>
						</li>
					</ul>
					
				</div>
				
				<div id="tab-infos">
					
					<ul class="simple-list with-icon icon-info with-padding">
						<li><a href="#">Lorem ipsum</a></li>
						<li><a href="#">Lorem ipsum</a></li>
						<li><a href="#">Lorem ipsum</a></li>
						<li><a href="#">Lorem ipsum</a></li>
						<li><a href="#">Lorem ipsum</a></li>
						<li><a href="#">Lorem ipsum</a></li>
					</ul>
					
				</div>
				
			</div></div>
		</section>
		
	</article>
	
	<!--
	
	Updated as v1.5:
	Libs are moved here to improve performance
	
	-->
	
	<!-- Combined JS load -->
	<script src="../js/mini5f53.php?files=libs/jquery-1.6.3.min,common,mobile,jquery.tip"></script>
	
</body>
</html>